<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>美食今日推荐</title>
		<style type="text/css">
		.body{border: 1px solid black; 
		width: 300px;
		overflow: hidden;
		position: relative;
		}	
		.u1{list-style: none; float: left;}
		.u2{list-style: none; float: right;}
		.head{margin-top: 10px;margin-left: 40px;}
		.#tupian{margin-left: 100px;}
		.aclass{font-size: 13px;color: black;}	
		.aspan{font-size: 12px;color: burlywood;}
		</style>
	</head>
	<body>
		<div class="body">
			<div class="head"><pan >SHOP<strong>今日推荐</strong></pan>
				<img src="img/more.gif" id="tupian" style="position: absolute; right: 0;" />
				<img src="img/shen.png"  style="position: absolute;left: 100px; top: 45px;"/>
			</div>
			<ul class="u1">
				<li>
					<img src="img/img9.gif" /> 
				</li>
				<li>
					<img src="img/img7.gif" />
				</li>
				<li>
					<img src="img/img8.gif" />
				</li>
				<li>
					<img src="img/img7.gif" />
				</li>
			</ul>
			<ul class="u2">
				<li>
					<a href="#" class="aclass">汉来国际美食百货</a><br />
					<span class="aspan">口味：创意中餐<br />
                                                       区域：朝阳/CBD</span><br /> 
                                                     
				</li>
				<li>
					<a href="#" class="aclass">汉来国际美食百货</a><br />
					<span class="aspan">口味：创意中餐<br />
                                                       区域：朝阳/CBD</span> <br /> <br />
				</li>
				<li>
					<a href="#" class="aclass">汉来国际美食百货</a><br />
					<span class="aspan">口味：创意中餐<br />
                                                       区域：朝阳/CBD</span>  <br /> 
				</li>
				<li>
					<a href="#" class="aclass">汉来国际美食百货</a><br />
					<span class="aspan">口味：创意中餐<br />
                                                     区域：朝阳/CBD</span>   <br />
				</li>
			</ul>
		</div>
	</body>
</html>
